<script setup>
import {computed, defineProps, inject, provide, reactive, ref} from "vue";
import WordFormedTagGroup from "@/components/WordFormedTag/WordFormedTagGroup.vue";
import WordFormedCheckTag from "@/components/WordFormedTag/WordFormedCheckTag.vue";
import {formsOutCssMapping} from "@/components/constants";
import {Close} from "@element-plus/icons-vue";
import {globalContextKey1, globalContextKey2} from "@/constants/gConstants";

const theProps = defineProps(["theFormCounts", "isBatchMatch","checkedList"]);
const emits = defineEmits(["theFormBatchDelete"])

const cptCheckedList = computed(()=>{
  // console.log('getter in compute modelValue from WordFormedTagGroup with model.value : ',model.value);
  if(theProps.isBatchMatch){
    return theProps.theFormCounts.checkedList;
  }else{
    return theProps.checkedList;
  }
})

function showIt(e) {
  console.log("showIt", theProps.checkedList);
}
function deleteAllPickDoneOfTheForm(){
    emits("theFormBatchDelete",theProps.theFormCounts['form']);
}
// console.log('FormCheckGroup not s setup complete');

</script>

<template>
<!--  the checkedList:-->
<!--  <br/>-->
<!--  {{theFormCounts}}-->
<!--    <button @click="showIt">show it</button>-->
  <!--  <div class="formsCheckGroup formsOut" :class="classObject">-->
<!--  <div class="formsCheckGroup formsOut" :style="styleObject">-->

    <WordFormedTagGroup v-if="theFormCounts&&theFormCounts.formCntArr&&theFormCounts.formCntArr.length>0"
                        v-model="cptCheckedList"
                        :theForm="theFormCounts['form']">
        <WordFormedCheckTag v-for="(theFormCnt,idx) in theFormCounts.formCntArr" :label="theFormCnt"></WordFormedCheckTag>
        <el-button class="closeBtn" :icon="Close" circle @click="deleteAllPickDoneOfTheForm" v-if="isBatchMatch"></el-button>
    </WordFormedTagGroup>

<!--  </div>-->
  <!--    <el-checkbox-group v-model="theFormCounts.checkedList">-->
  <!--    <el-checkbox-group v-model="checkedList">-->
  <!--      <el-checkbox v-for="(theFormCnt,idx) in theFormCounts.formCntArr" :label="theFormCnt"/>-->
  <!--    </el-checkbox-group>-->
</template>

<style scoped>
.formsCheckGroup .el-checkbox {
  margin-right: 5px;
  --el-checkbox-height: 20px;
}

.formsOut {
  border: 1px solid;
  border-radius: 2px;
  padding-left: 15px;
  margin-top: 5px;
  max-width: 400px;
  //width: 200px;
}

.el-button.closeBtn{
    line-height: 8px;
    height: var(--common-tag-height);
    width: var(--common-tag-height);
    padding:7px 7px;
    margin: 2px;
    font-weight: 520;
    --el-font-size-base: 12px;
    /*background-color: var(--el-button-bg-color);*/
    /*border-color: var(--el-button-border-color);*/
}
</style>